<template>
    <div>
        <tr>
            <td> 门店编号<input type="text" v-model="cs.sname">——门店名称<input type="text" v-model="cs.name">——状态<select
                    v-model="cs.tyle">
                    <option value="">请选择</option>
                    <option value="开业">开业</option>
                    <option value="闭店">闭店</option>
                </select><input type="button" value="查询" @click="show"><input type="button" value="重置" @click="oo"></td>
        </tr>
        <table class="table table-bordered">



            <tbody>
                <tr>
                    <td>门店编号</td>
                    <td>门店名称</td>
                    <td>门店业态</td>
                    <td>状态</td>
                    <td>开业时间</td>
                    <td>门店电话</td>
                    <td>店长</td>
                    <td>店长电话</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in as.row" :key="a.id">
                    <td>{{ a.sname }}</td>
                    <td>{{ a.name }}</td>
                    <td>{{ a.style }}</td>
                    <td>{{ a.tyle }}</td>
                    <td>{{ a.time }}</td>
                    <td>{{ a.tel }}</td>
                    <td>{{ a.pname }}</td>
                    <td>{{ a.ptel }}</td>
                    <td><img :src="a.img" width="70" height="70"></td>
                    <td><input type="button" value="删除" @click="del(a.id)"><input type="button" value="编辑"
                            @click="up(a.id)"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>当前{{ cs.pageindex }}页</span>--
        <span>共{{ as.pagecount }}条</span>--
        <span>当前{{ cs.pageindex }}/{{ as.sizecount }}页</span>
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(cs.pageindex - 1)">
        <span v-for="a in as.sizecount" @click="fy(a)">{{ a }}</span>
        <input type="button" value="下一页" @click="fy(cs.pageindex + 1)">
        <input type="button" value="尾页" @click="fy(as.sizecount)">
        <input type="number" v-model="as.pageindex"><input type="button" value="跳转" @click="fy(as.pageindex)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from "vue";
import moment from 'moment';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();


let cs: any = reactive({
    pageindex: 1,
    pagesize: 2,
    name: '',
    sname: '',
    tyle: ''
})
let as: any = reactive({
    pagecount: 0,
    sizecount: 0,
    row: []
})
onMounted(() => {
    show();
})
const oo = () => {
    show();
}
const show = () => {
    axios({
        url: 'https://localhost:7211/api/Emp/Show',
        method: 'get',
        params: cs
    })
        .then(res => {
            console.log(res);
            as.pagecount = res.data.pagecount;
            as.sizecount = res.data.sizecount;
            as.row = res.data.row;
        })
        .catch(err => {
            console.log(err);
        })
}
const fy = (f: any) => {
    if (f < 0) {
        cs.pageindex = 1;
        return;
    }
    if (f > as.sizecount) {
        cs.pageindex = as.sizecount;
        return;
    }
    cs.pageindex = f;
    show();
}
const del = (id: any) => {
    let f = confirm("确认删除吗")
    if (f) {
        axios({
            url: 'https://localhost:7211/api/Emp/del',
            method: 'post',
            params: {
                id: id
            }
        })
            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert("删除成功");
                    show();
                }
            })
            .catch(err => {
                console.log(err);

            })
    }

}
const up = (id: any) => {
    router.push({
        path: "/Update",
        query: {
            id: id
        }
    })
}
</script>

<style scoped></style>